<template>
  <div class="course-drawer">
    <a-drawer
      width="50%"
      placement="right"
      @close="close"
      :visible="dataDrawer.visible"
      :title="title"
      destroyOnClose
    >
      <div class="drawer-tab">
        <a-row>
          <a-col :md="12" :sm="24">
            <a-radio-group v-model="tab" @change="onTabChange">
              <a-radio-button :value="item.value" v-for="item in tabList" :key="item.value">{{
                item.label
              }}</a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :md="12" :sm="24">
            <span style="float: right">
              <span>名称筛选：</span>
              <a-input-search
                v-model="input"
                placeholder="请输入"
                style="width: 200px"
                @search="onSearch"
              />
            </span>
          </a-col>
        </a-row>
      </div>
      <div class="drawer-main">
        <course-ware v-if="tab === 0" :courseList="courseList" />
        <notes v-if="tab === 1" :notesList="notesList" />
        <paper v-if="tab === 2" :paperList="paperList" />
        <live v-if="tab === 3" :liveList="liveList" />
      </div>
    </a-drawer>
  </div>
</template>

<script>
import CourseWare from './courseWare'
import Notes from './notes'
import Paper from './paper'
import Live from './live'
import { viewCuorse, viewNotes, vidwPaper, viewLive } from '@/api/product/view'
export default {
  props: {
    dataDrawer: {
      type: Object,
      default: () => {
        return { visible: false, id: '' }
      }
    }
  },
  components: {
    CourseWare,
    Notes,
    Paper,
    Live
  },
  data () {
    return {
      title: '查看内容',
      tab: 0,
      tabList: [{
        label: '课件',
        value: 0
      }, {
        label: '讲义',
        value: 1
      }, {
        label: '试卷',
        value: 2
      }, {
        label: '直播',
        value: 3
      }],
      input: '',
      courseList: [],
      notesList: [],
      paperList: [],
      liveList: []
    }
  },
  watch: {

  },
  mounted () {
    this.getCuorse()
    this.getNotes()
    this.getPaper()
    this.getLive()
  },
  methods: {
    close () {
      this.$emit('closeBox')
    },
    onTabChange (e) {
      this.tab = e.target.value
      this.input = ''
    },
    // 搜索
    onSearch () {
      if (this.tab === 0) {
        this.getCuorse()
      }
      if (this.tab === 1) {
        this.getNotes()
      }
      if (this.tab === 2) {
        this.getPaper()
      }
      if (this.tab === 3) {
        this.getLive()
      }
    },
    // 获取课程内容
    getCuorse () {
      const data = {
        courseId: this.dataDrawer.id
      }
      if (this.input !== '') {
        data.name = this.input
      }
      viewCuorse(data).then(res => {
        if (res.code === '1') {
          this.courseList = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 获取讲义内容
    getNotes () {
      const data = {
        courseId: this.dataDrawer.id
      }
      if (this.input !== '') {
        data.name = this.input
      }
      viewNotes(data).then(res => {
        if (res.code === '1') {
          this.notesList = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 获取试卷内容
    getPaper () {
      const data = {
        courseId: this.dataDrawer.id
      }
      if (this.input !== '') {
        data.name = this.input
      }
      vidwPaper(data).then(res => {
        if (res.code === '1') {
          this.paperList = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 获取直播内容
    getLive () {
      const data = {
        courseId: this.dataDrawer.id
      }
      if (this.input !== '') {
        data.name = this.input
      }
      viewLive(data).then(res => {
        if (res.code === '1') {
          this.liveList = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.drawer-main {
  margin-top: 20px;
}
</style>
